@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .input-primary {
    @apply h-11 w-full rounded-md border bg-transparent text-lg font-normal text-gray-80 outline-none ring-opacity-10 focus:ring-3 disabled:text-gray-40 disabled:placeholder-gray-20 dark:ring-opacity-20 ring-primary disabled:border-gray-10 border-gray-40 placeholder-gray-30 px-4 focus:border-primary;
  }

  .input-error {
    @apply h-11 w-full rounded-md border bg-transparent text-lg font-normal text-gray-80 outline-none ring-opacity-10 focus:ring-3 disabled:text-gray-40 disabled:placeholder-gray-20 dark:ring-opacity-20 ring-red disabled:border-gray-10 border-gray-40 placeholder-gray-30 px-4 focus:border-red;
  }
}
